<template>
    <div class="main_content">
        <div class="left">
            <el-tree :data="treeList"  ref="treeBox" @node-click='treeNodeClickFn'   node-key="id" :render-content="renderContent" :expand-on-click-node="false" :highlight-current="true" :filter-node-method="filterNode" :default-expanded-keys="[deptId]"></el-tree>
        </div>
        <div class="center">
            <div class="list">
                <div :class="['item',modeleActive == 1 ? 'active' :'']" @click="setTab(1)">设备管理</div>
                <div :class="['item',modeleActive == 2 ? 'active' :'']" @click="setTab(2)">人员管理</div>
                <div :class="['item',modeleActive == 3 ? 'active' :'']" @click="setTab(3)">视频监控</div>
                <div :class="['item',modeleActive == 4 ? 'active' :'']" @click="setTab(4)">智能监控</div>
                <div :class="['item',modeleActive == 5 ? 'active' :'']" @click="setTab(5)">开放接口</div>
            </div>
        </div>
        <div class="right">
            <div class="content" v-if="modeleActive == 1">
                <div class="top">
                    <el-tabs v-model="tabActive" @tab-click="handleClick">
                        <el-tab-pane label="报警频率" name="1"> </el-tab-pane>
                        <el-tab-pane label="计算策略" name="2"></el-tab-pane>
                        <el-tab-pane label="围栏范围" name="3"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="bottom" v-if="tabActive == 1">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>项目总频率</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                            </h2>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">1天内报警总数：</div>
                                <div class="sub" v-if="editActive != 1">{{ frequencyLimitDay ? frequencyLimitDay : '—' }}</div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <Input v-model="frequencyLimitDay" placeholder="请输入" :maxlength="3" style="width: 300px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">1小时内报警总数：</div>
                                <div class="sub" v-if="editActive != 1">{{ frequencyLimitHour ? frequencyLimitHour : '—' }}</div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <Input v-model="frequencyLimitHour" placeholder="请输入" :maxlength="3" style="width: 300px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">两次报警间隔：</div>
                                <div class="sub" v-if="editActive != 1">{{ frequencyLimitInterval ? frequencyLimitInterval : '—' }}</div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <Input v-model="frequencyLimitInterval" placeholder="请输入" :maxlength="3" style="width: 300px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>类型总频率</span>
                                <i v-if="editActive == 2" class="cancel" @click="cancel(2)">取消</i>
                                <i v-if="editActive == 2" class="save" @click="save(2)">保存</i>
                                <i v-if="editActive != 2" class="el-icon-edit-outline add" @click="setEdit(2)"></i>
                                <i v-if="editActive == 2" class="el-icon-circle-plus-outline add" @click="showModal(1)"></i>
                            </h2>
                        </div>
                        <div class="list table" v-for="(item,index) in typeList" :key="index">
                            <div class="item" style="width: 10%;">
                                <div class="name">{{getName(item.ruleType,ruleTypeList)}}</div>
                            </div>
                            <div class="close" v-if="editActive == 2">
                                <img src="../../assets/images/inner/cfg/rule_del.png" class="delImg" @click="delRuleType(index, typeList)" />
                            </div>
                            <div class="item" style="width: 28%;margin-right: 2%;">
                                <div class="name">1天内报警总数：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 2">{{ item.frequencyLimitDay }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 2 && isEdit">
                                    <Input v-model="item.frequencyLimitDay" placeholder="请输入" :maxlength="3" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 28%;margin-right: 2%;">
                                <div class="name">1小时内报警总数：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 2">{{ item.frequencyLimitHour }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 2 && isEdit">
                                    <Input v-model="item.frequencyLimitHour" placeholder="请输入" :maxlength="3" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 28%;">
                                <div class="name">两次报警间隔：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 2">{{ item.frequencyLimitInterval }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 2 && isEdit">
                                    <Input v-model="item.frequencyLimitInterval" placeholder="请输入" :maxlength="3" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom" v-if="tabActive == 2">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>工时计算</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                            </h2>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">工时计算策略：</div>
                                <div class="sub" v-if="editActive != 1">{{ oilStrategy ? oilStrategy : '—' }}</div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <Input v-model="oilStrategy" placeholder="请输入" :maxlength="60"  style="width: 500px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>油位计算</span>
                                <i v-if="editActive == 2" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 2" class="save" @click="save(2)">保存</i>
                                <i v-if="editActive != 2" class="el-icon-edit-outline add" @click="setEdit(2)"></i>
                            </h2>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">油位计算策略：</div>
                                <div class="sub" v-if="editActive != 2">{{ workStrategy ? workStrategy : '—' }}</div>
                                <div class="sub" v-if="editActive == 2 && isEdit">
                                    <Input v-model="workStrategy" placeholder="请输入" :maxlength="60" style="width: 500px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom" v-if="tabActive == 3">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>围栏范围</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                                <i v-if="editActive == 1" class="el-icon-circle-plus-outline add" @click="showModal(5)"></i>

                            </h2>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">定位显示有效区域：</div>
                                <div class="sub" v-if="editActive != 1">
                                    <div @click="setGps(1)" class="btn">点击查看范围区域</div>
                                </div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <div @click="setGps(4,1)" class="btn">点击设置范围区域</div>
                                </div>
                            </div>
                        </div>
                        <div class="list" v-if="gpsTypeArr.includes('car_fence')">
                            <div class="item">
                                <div class="name">车辆定位显示有效区域：</div>
                                <div class="sub" v-if="editActive != 1">
                                    <div @click="setGps(2)" class="btn">点击查看范围区域</div>
                                </div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <div @click="setGps(4,2)" class="btn">点击设置范围区域</div>
                                </div>
                            </div>
                        </div>
                        <div class="list" v-if="gpsTypeArr.includes('ship_fence')">
                            <div class="item">
                                <div class="name">船舶定位显示有效区域：</div>
                                <div class="sub" v-if="editActive != 1">
                                    <div @click="setGps(3)" class="btn">点击查看范围区域</div>
                                </div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <div @click="setGps(4,3)" class="btn">点击设置范围区域</div>
                                </div>
                            </div>
                            </div>
                    </div>
                </div>
            </div>
            <div class="content" v-if="modeleActive == 2">
                <div class="top">
                    <el-tabs v-model="tabActive" @tab-click="handleClick">
                        <el-tab-pane label="报警频率" name="1"></el-tab-pane>
                        <el-tab-pane label="闸机参数" name="2"></el-tab-pane>
                        <el-tab-pane label="围栏范围" name="3"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="bottom" v-if="tabActive == 1">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>项目总频率</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                            </h2>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">1天内报警总数：</div>
                                <div class="sub" v-if="editActive != 1">{{ frequencyLimitDay ? frequencyLimitDay : '—' }}</div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <Input v-model="frequencyLimitDay" placeholder="请输入" :maxlength="3" style="width: 300px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">1小时内报警总数：</div>
                                <div class="sub" v-if="editActive != 1">{{ frequencyLimitHour ? frequencyLimitHour : '—' }}</div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <Input v-model="frequencyLimitHour" placeholder="请输入" :maxlength="3" style="width: 300px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">两次报警间隔：</div>
                                <div class="sub" v-if="editActive != 1">{{ frequencyLimitInterval ? frequencyLimitInterval : '—' }}</div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <Input v-model="frequencyLimitInterval" placeholder="请输入" :maxlength="3" style="width: 300px;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>类型总频率</span>
                                <i v-if="editActive == 2" class="cancel" @click="cancel(2)">取消</i>
                                <i v-if="editActive == 2" class="save" @click="save(2)">保存</i>
                                <i v-if="editActive != 2" class="el-icon-edit-outline add" @click="setEdit(2)"></i>
                                <i v-if="editActive == 2" class="el-icon-circle-plus-outline add" @click="showModal(1)"></i>
                            </h2>
                        </div>
                        <div class="list table" v-for="(item,index) in typeList" :key="index">
                            <div class="item" style="width: 10%;">
                                <div class="name">{{getName(item.ruleType,ruleTypeList)}}</div>
                            </div>
                            <div class="close" v-if="editActive == 2">
                                <img src="../../assets/images/inner/cfg/rule_del.png" alt="" class="delImg" @click="delRuleType(index, typeList)">
                            </div>
                            <div class="item" style="width: 28%;margin-right: 2%;">
                                <div class="name">1天内报警总数：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 2">{{ item.frequencyLimitDay }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 2 && isEdit">
                                    <Input v-model="item.frequencyLimitDay" placeholder="请输入" :maxlength="3" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 28%;margin-right: 2%;">
                                <div class="name">1小时内报警总数：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 2">{{ item.frequencyLimitHour }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 2 && isEdit">
                                    <Input v-model="item.frequencyLimitHour" placeholder="请输入" :maxlength="3" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 28%;">
                                <div class="name">两次报警间隔：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 2">{{ item.frequencyLimitInterval }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 2 && isEdit">
                                    <Input v-model="item.frequencyLimitInterval" placeholder="请输入" :maxlength="3" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom" v-if="tabActive == 2">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>闸机参数</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                                <i v-if="editActive == 1" class="el-icon-circle-plus-outline add" @click="showModal(2)"></i>
                            </h2>
                        </div>
                        <div class="list table" v-for="(item,index) in platformList" :key="index">
                            <div class="item" style="width: 10%;">
                                <div class="name">{{getName(item.platform,platformTypeList)}}</div>
                            </div>
                            <div class="close" v-if="editActive == 1">
                                <img src="../../assets/images/inner/cfg/rule_del.png" class="delImg" @click="delPlatform(index, platformList)" />
                            </div>
                            <div class="item" style="width: 20%;margin-right: 2%;">
                                <div class="name" style="width: 1rem;">AppID：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.appId }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.appId" placeholder="请输入" :maxlength="64" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 20%;margin-right: 2%;">
                                <div class="name" style="width: 1rem;">AppKey：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.appKey }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.appKey" placeholder="请输入" :maxlength="64" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 20%;margin-right: 2%;">
                                <div class="name" style="width: 1rem;">AppSecret：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.appSecret }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.appSecret" placeholder="请输入" :maxlength="128" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 20%;">
                                <div class="name" style="width: 1rem;">备注：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.remark }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.remark" placeholder="请输入" :maxlength="100" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom" v-if="tabActive == 3">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>围栏范围</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                            </h2>
                        </div>
                        <div class="list">
                            <div class="item">
                                <div class="name">定位显示有效区域：</div>
                                <div class="sub" v-if="editActive != 1">
                                    <div @click="setGps(1)" class="btn">点击查看范围区域</div>
                                </div>
                                <div class="sub" v-if="editActive == 1 && isEdit">
                                    <div @click="setGps(4,1)" class="btn">点击设置范围区域</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content" v-if="modeleActive == 3">
                <div class="top">
                    <el-tabs v-model="tabActive" @tab-click="handleClick">
                        <el-tab-pane label="视频参数" name="1"> </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="bottom" v-if="tabActive == 1">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>视频参数</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                                <i v-if="editActive == 1" class="el-icon-circle-plus-outline add" @click="showModal(3)"></i>
                            </h2>
                        </div>
                        <div class="list table" v-for="(item,index) in fvsList" :key="index">
                            <div class="item" style="width: 10%;">
                                <div class="name">{{getName(item.platform,fvsTypeList)}}</div>
                            </div>
                            <div class="close" v-if="editActive == 1">
                                <img src="../../assets/images/inner/cfg/rule_del.png" class="delImg" @click="delFvsPlatform(index, fvsList)" />
                            </div>
                            <div class="item" style="width: 40%;margin-right: 5%;">
                                <div class="name" style="width: 1rem;">AppKey：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.appKey }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.appKey" placeholder="请输入" :maxlength="64" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 40%;margin-right: 5%;">
                                <div class="name" style="width: 1rem;">AppSecret：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.appSecret }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.appSecret" placeholder="请输入" :maxlength="64" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content" v-if="modeleActive == 4">
                <div class="top">
                    <el-tabs v-model="tabActive" @tab-click="handleClick">
                        <el-tab-pane label="算法参数" name="1"> </el-tab-pane>
                    </el-tabs>
                </div>
                <div class="bottom" v-if="tabActive == 1">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>算法类型</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                                <i v-if="editActive == 1" class="el-icon-circle-plus-outline add" @click="showModal(4)"></i>
                            </h2>
                        </div>
                        <div class="list table" style="flex-wrap: wrap;background: #fff">
                            <div class="item imgBox" style="width: 24%;margin-right: 1%;margin-bottom: 0.15rem;" v-for="(item,index) in algorithmList" :key="index">
                                <img :src="item.iconUrl" alt="" class="img">
                                <div class="text">{{item.name}}</div>
                                <img v-if="editActive == 1" src="../../assets/images/inner/cfg/rule_del.png" class="delImg" @click="delAlgorithm(index, algorithmList)" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content" v-show="modeleActive == 5">
                <div class="top">
                    <el-tabs v-model="tabActive" @tab-click="handleClick">
                        <el-tab-pane label="接口配置" name="1"></el-tab-pane>
                    </el-tabs>
                </div>
                <div class="bottom" v-show="tabActive == 1">
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>基本信息</span>
                                <i v-if="editActive == 1" class="cancel" @click="cancel(1)">取消</i>
                                <i v-if="editActive == 1" class="save" @click="save(1)">保存</i>
                                <i v-if="editActive != 1" class="el-icon-edit-outline add" @click="setEdit(1)"></i>
                                <i v-if="editActive == 1" class="el-icon-circle-plus-outline add" @click="setOpenLicense"></i>
                            </h2>
                        </div>
                        <div class="list table" v-for="(item,index) in openLicense" :key="index">
                            <div class="close" v-if="editActive == 1">
                                <img src="../../assets/images/inner/cfg/rule_del.png" class="delImg" @click="delOpenLicense(index, openLicense)" />
                            </div>
                            <div class="item" style="width: 15%;margin-right: 1%;" v-if="editActive != 1">
                                <div class="name" style="width: 1rem;">开放开关：</div>
                                <el-switch @change='switchChange(item.appKey,item.state)'  v-preventReClick="1500" v-model="item.state"  active-color="#1891ff" inactive-color="#D3D3D3"></el-switch>
                            </div>
                            <div class="item" style="width: 27%;margin-right: 1%;">
                                <div class="name" style="width: 1rem;">AppKey：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.appKey }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.appKey" placeholder="请输入" :maxlength="32" style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 27%;margin-right: 1%;">
                                <div class="name" style="width: 1rem;">AppSecret：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.appSecret }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.appSecret" placeholder="请输入" :maxlength="32"  style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                            <div class="item" style="width: 27%;">
                                <div class="name" style="width: 1rem;">备注：</div>
                                <div class="sub" style="flex: 1" v-if="editActive != 1">{{ item.remark }}</div>
                                <div class="sub" style="flex: 1" v-if="editActive == 1 && isEdit">
                                    <Input v-model="item.remark" placeholder="请输入" :maxlength="50"  style="width: 100%;" clearable />
                                    <input type="password" autocomplete="new-password" style="display: none" />
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="info">
                        <div class="title">
                            <h2>
                                <span class="bc"></span>
                                <span>接口配置</span>
                                <i v-if="editActive == 2" class="cancel" @click="cancel(2)">取消</i>
                                <i v-if="editActive == 2" class="save" @click="save(2)">保存</i>
                                <i v-if="editActive != 2" class="el-icon-edit-outline add" @click="setEdit(2)"></i>
                            </h2>
                        </div>
                        <div class="list" >
                            <div class="tree" >
                                <el-tree
                                    ref="tree"
                                    :data="allRuleApiTree"
                                    show-checkbox
                                    node-key="id"
                                    :props="defaultProps">
                                </el-tree>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!--添加类型弹框-->
        <Modal v-model="ruleTypeModal" title="添加类型" width="500px" :mask-closable="false" class-name="msgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>报警类型</span>
                        </h2>
                    </div>
                    <div class="infoBox" style="margin:10px auto;">
                        <RadioGroup v-model="ruleType" vertical >
                            <Radio :label="item.id" v-for="(item,index) in ruleTypeList" :key="index" :disabled="typeIdList.includes(item.id)">
                                <Icon type="social-apple"></Icon>
                                <span style="color:#181818; font-family: MicrosoftYaHei;font-size:14px;">{{item.name}}</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="close(1)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891ff;">取消</span> </el-button>
                <el-button @click="setRuleType" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891ff;border:1px solid #1891ff;" size="mini"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <!--查看电子围栏-->
        <Modal v-model="gpsModal" title="查看电子围栏" width="800px" :mask-closable="false" class-name="msgModal" :footer-hide="true">
            <div class="msgBox" style="width: 98%;height: 600px;margin: auto">
                <div id="gps" style="width: 100%;height: 100%;"></div>
            </div>
        </Modal>

        <!--设置电子围栏弹框-->
        <Modal v-model="gpsTypeModal" title="添加电子围栏类型" width="500px" :mask-closable="false" class-name="msgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>电子围栏类型</span>
                        </h2>
                    </div>
                    <div class="infoBox" style="margin:10px auto;">
                        <RadioGroup v-model="gpsTypeCode" vertical >
                            <Radio :label="item.code" v-for="(item,index) in gpsTypeList" :key="index" :disabled="gpsTypeArr.includes(item.code)">
                                <Icon type="social-apple"></Icon>
                                <span style="color:#181818; font-family: MicrosoftYaHei;font-size:14px;">{{item.name}}</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="close(6)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891ff;">取消</span> </el-button>
                <el-button @click="setGpsType" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891ff;border:1px solid #1891ff;" size="mini"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <!--设置电子围栏弹框-->
        <Modal v-model="setGpsModal" title="设置范围区域" width="1300px" :mask-closable="false" class-name="msgModal">
            <div class="msg">
                <div class="fence">
                    <div id="container" class="container" style="border:1px solid #1891ff;"></div>
                    <div class="searchAddress">
                        <Input search enter-button placeholder="请输入准确的项目地址"  style="width:300px"  @on-search="searchAddress" v-model="address" clearable />
                    </div>
                </div>
                <div class="right">
                    <div class="isShow">
                        点击鼠标“左键”开始绘图，点击鼠标“右键”或“双击左键”结束绘图
                    </div>
                    <div class="center">
                        <p>
                            <span>经度</span>
                            <span>纬度</span>
                        </p>
                        <div class="p-list" v-for="(item,index) in polygonPointList" :key="index" style="display:block;">
                            <p>第{{index+1}}个多边形</p>
                            <div class="list" v-for="(itemSub,indexSub) in item" :key="indexSub">
                                <Input v-model="itemSub.lng" placeholder="请输入经度" style="width:80px" clearable />
                                <Input v-model="itemSub.lat" placeholder="请输入纬度" style="width:80px ;margin-right:10px;margin-left:10px;" />
                                <el-button @click="removeGpsRow(index,indexSub)" :disabled="item.length == 3" :type="item.length == 3?'info':'danger'" size="small" plain>删除</el-button>
                            </div>
                            <p>
                                <el-button type="primary" @click="addGpsRow(index)" style="margin-right:20px" size="small" plain >加点</el-button>
                                <el-button type="primary" @click="drawArea(index)" style="margin-right:20px" size="small" plain>绘制</el-button>
                                <el-button type="primary" @click="delGps(index,polygonPointList)" style="margin-right:20px" size="small" plain>删除电子围栏</el-button>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="close(2)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891ff;">取消</span> </el-button>
                <el-button @click="sumbitGps" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891ff;border:1px solid #1891ff;" size="mini"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <!--设置闸机类型弹框-->
        <Modal v-model="platformModal" title="添加闸机" width="500px" :mask-closable="false" class-name="msgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>闸机平台</span>
                        </h2>
                    </div>
                    <div class="infoBox" style="margin:10px auto;">
                        <RadioGroup v-model="platform" vertical >
                            <Radio :label="item.id" v-for="(item,index) in platformTypeList" :key="index" :disabled="platformIdList.includes(item.id)">
                                <Icon type="social-apple"></Icon>
                                <span style="color:#181818; font-family: MicrosoftYaHei;font-size:14px;">{{item.name}}</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="close(3)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891ff;">取消</span> </el-button>
                <el-button @click="setPlatform" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891ff;border:1px solid #1891ff;" size="mini"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <!--视频类型弹框-->
        <Modal v-model="fvsModal" title="添加厂商" width="500px" :mask-closable="false" class-name="msgModal">
            <div class="msgBox">
                <div class="info">
                    <div class="title">
                        <h2>
                            <span class="bc"></span>
                            <span>厂商类型</span>
                        </h2>
                    </div>
                    <div class="infoBox" style="margin:10px auto;">
                        <RadioGroup v-model="fvsId" vertical >
                            <Radio :label="item.id" v-for="(item,index) in fvsTypeList" :key="index" :disabled="fvsIdList.includes(item.id)">
                                <Icon type="social-apple"></Icon>
                                <span style="color:#181818; font-family: MicrosoftYaHei;font-size:14px;">{{item.name}}</span>
                            </Radio>
                        </RadioGroup>
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="close(4)" style="padding:7px 25px;border-radius: 15px;background:rgba(46, 104, 253, 0.16);border:1px solid rgba(46, 104, 253, 0.16);" type="info" size="mini"><span style="color:#1891ff;">取消</span> </el-button>
                <el-button @click="setFvsPlatform" type="primary"  style="padding:7px 25px;border-radius: 15px;background:#1891ff;border:1px solid #1891ff;" size="mini"  v-preventReClick="1500"><span style="color:#fff;">确定</span></el-button>
            </div>
        </Modal>

        <Modal v-model="algorithmModal" title="添加类型" width="900px;" :mask-closable="false" >
            <div class="addModel">
                <div class="bottom">
                    <h2 style=" width: 98%;color:#1891ff;margin: 0 20px;">算法类型</h2>
                    <div class="list" v-if="algorithmTypeList.length>0">
                        <div  class="item" v-for="item in algorithmTypeList" :key='item.id' @click="setAlgorithm(item.id)" :class="algorithmId.includes(item.id) ? 'active' :''" >
                            <img :src="item.iconUrl" alt="" class="img" >
                            <div class="text">{{item.name}}</div>
                        </div>
                    </div>
                    <div v-else class="no_lsit">
                        <img src="./../../assets/images/inner/cfg/sys_setting.png"  style="width:460px;height:300px;margin:0 auto;" />
                    </div>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="close(5)" type="info" size="small" plain>取消</el-button>
                <el-button @click="setAlgorithmBtn" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>
    </div>
</template>

<script>
import {machConfig} from "@/mixins/cfg/machConfig";
import {empConfig} from "@/mixins/cfg/empConfig";
import {fvsConfig} from "@/mixins/cfg/fvsConfig";
import {algorithmConfig} from "@/mixins/cfg/algorithmConfig";
import {openApi} from "@/mixins/cfg/openApi";
import {gpsConfig} from "@/mixins/gps";
import {commonConfig} from "@/mixins/cfg/common";
import {getAlldeptList, setCfgConfigure, getCfgList} from "@/api/api";
import {toTree, trans, treeSort} from "@/sever/config";

export default {
    mixins:[machConfig,empConfig,fvsConfig,algorithmConfig,openApi,gpsConfig,commonConfig],
    data() {
        return {
            modeleActive:1,//切换栏模块下标
            tabActive:'1',//切换栏模块下标
            module:'mach_freq',//模块
            editActive:0,//编辑下标
            isEdit:false,//是否编辑
            deptId:'',//组织机构id
            treeList:[],//左侧组织机构树
            checkFlag:false,//数据校验
        };
    },
    methods: {
        //tab切换
        handleClick(){
            let module = '';
            if(this.modeleActive == 1){
                if(this.tabActive == 1){
                    module = 'mach_freq';
                }else if(this.tabActive == 2){
                    module = 'mach_strategy';
                }else if(this.tabActive == 3){
                    module = 'mach_fence';
                }
            }else if(this.modeleActive == 2){
                if(this.tabActive == 1){
                    module = 'emp_freq';
                }else if(this.tabActive == 2){
                    module = 'emp_gate';
                    this.getPlatformTypeList()
                }else if(this.tabActive == 3){
                    module = 'emp_fence';
                }
            }else if(this.modeleActive == 3){
                if(this.tabActive == 1){
                    module = 'fvs_platform';
                }
            }else if(this.modeleActive == 4){
                if(this.tabActive == 1){
                    module = 'fim_alg_type';
                }
            }else if(this.modeleActive == 5){
                if(this.tabActive == 1){
                    module = 'open_license';
                }
                this.getOpenLicenseRule();
            }

            this.module = module;
            this.isEdit = false;
            this.editActive = 0;
            this.getCfgListFn();
        },
        //获取配置信息
        getCfgListFn(){
            this.initData();
            let params = {
                deptId:this.deptId,
                module:this.module,
            }
            getCfgList(params).then(res => {
                if(res.code == 200){
                    let list = res.data.list;
                    if(list.length > 0){
                        if(this.modeleActive == 1){
                            if(this.tabActive == 1){
                                list.forEach(v => {
                                    if(v.type == 3){
                                        this.frequencyLimitDay = v.frequencyLimitDay;
                                        this.frequencyLimitHour = v.frequencyLimitHour;
                                        this.frequencyLimitInterval = v.frequencyLimitInterval;
                                    }else{
                                        this.typeList.push(v)
                                        this.typeIdList.push(v.ruleType);
                                    }
                                })
                                this.setLocalStorage();

                            }else if(this.tabActive == 2){
                                for (let key in list) {
                                    const obj = list[key];
                                    if(obj.hasOwnProperty('oilStrategy')){
                                        this.oilStrategy = obj.oilStrategy;
                                    }
                                    if(obj.hasOwnProperty('workStrategy')){
                                        this.workStrategy = obj.workStrategy;
                                    }
                                }
                                this.setLocalStorage();
                            }else if(this.tabActive == 3){
                                this.polygonPointAll = list;
                                list.forEach(v => {
                                    this.gpsTypeArr.push(v.code);
                                })
                                this.setLocalStorage();
                            }
                        }else if(this.modeleActive == 2){
                            if(this.tabActive == 1){
                                list.forEach(v => {
                                    if(v.type == 3){
                                        this.frequencyLimitDay = v.frequencyLimitDay;
                                        this.frequencyLimitHour = v.frequencyLimitHour;
                                        this.frequencyLimitInterval = v.frequencyLimitInterval;
                                    }else{
                                        this.typeList.push(v)
                                        this.typeIdList.push(v.ruleType);
                                    }
                                })
                                this.setLocalStorage();

                            }else if(this.tabActive == 2){
                                this.platformList = list;
                                list.forEach(v => {
                                    this.platformIdList.push(v.platform)
                                })
                                this.setLocalStorage();
                            }else if(this.tabActive == 3){
                                this.polygonPointAll = list;
                            }
                        }else if(this.modeleActive == 3){
                            if(this.tabActive == 1){
                                this.fvsList = list;
                                list.forEach(v => {
                                    this.fvsIdList.push(v.platform)
                                })
                                this.setLocalStorage();
                            }
                        }else if(this.modeleActive == 4){
                            if(this.tabActive == 1){
                                list.forEach(v => {
                                    v.iconUrl = this.getUrl(v.type);
                                    this.algorithmId.push(v.type);
                                    this.algorithmList.push(v);
                                })
                                this.setLocalStorage();
                            }
                        }else if(this.modeleActive == 5){
                            if(this.tabActive == 1){
                                list.forEach(v => {
                                    if(v.state == 1){
                                        v.state = true;
                                    }else{
                                        v.state = false;
                                    }
                                })
                                this.openLicense = list;
                                this.openLicenseList = list;
                                this.setLocalStorage();
                            }
                        }

                    }else{
                        this.polygonPointAll = [];
                        this.setLocalStorage();
                    }
                }else{
                    this.$Message.warning(res.msg)
                }
            })
            .catch(error => console.log(error))
        },
        //设置配置信息
        setCfgConfigureFn(params){
            setCfgConfigure(params).then(res => {
                if(res.code == 200){
                    this.isEdit = false;
                    this.editActive = 0;
                    this.setLocalStorage();
                    if(this.modeleActive == 2 || this.modeleActive == 1){
                        if(this.tabActive == 3){
                            this.getCfgListFn();
                            // localStorage.setItem('polygonPointList',JSON.stringify(this.polygonPointList));
                        }
                    }
                    this.$Message.success('操作成功');
                }else {
                    this.$Message.warning(res.msg)
                }
            })
            .catch(error => console.log(error))
        },
        //设备tab下标
        setTab(active){
            this.tabActive = '1';
            this.modeleActive = active;
            let module = '';
            if(this.modeleActive == 1){
                module = 'mach_freq';
            }else if(this.modeleActive == 2){
                module = 'emp_freq';
            }else if(this.modeleActive == 3){
                module = 'fvs_platform';
            }else if(this.modeleActive == 4){
                module = 'fim_alg_type';
            }else if(this.modeleActive == 5){
                module = 'open_license';
                this.getOpenLicenseRule();
            }
            this.module = module;
            this.isEdit = false;
            this.editActive = 0;
            this.getCfgListFn();
        },
        //设置修改栏目下标
        setEdit(active){
            this.isEdit = true;
            this.getLocalStorage();
            this.editActive = active;
        },
        //显示弹框
        showModal(active){
          if(active == 1){
              this.ruleTypeModal = true;
              this.ruleType = '';
          }else if(active == 2){
              this.platformModal = true;
              this.platform = '';
          }else if(active == 3){
              this.fvsModal = true;
              this.fvsId = '';
          }else if(active == 4){
              this.algorithmModal = true;
              // this.algorithmId = [];
          }else if(active == 5){
              this.gpsTypeCode = '';
              this.gpsTypeModal = true;
          }

        },
        //取消集合
        cancel(active){
            if(this.modeleActive == 5 && this.editActive == 2){
                for (let i = 0; i < this.allRuleApiTree.length; i++) {
                    const e = this.allRuleApiTree[i];
                    this.$refs.tree.setChecked(e.id, false, true)
                }
                setTimeout(()=>{
                    for (let i = 0; i < this.checkedList.length; i++) {
                        const v = this.checkedList[i];
                        this.$refs.tree.setChecked(v, true, false);
                    }
                },100)
            }
            this.isEdit = false;
            this.getLocalStorage();
            this.editActive = 0;

        },
        //关闭弹框集合
        close(active){
            if(active == 1){
                this.ruleTypeModal = false;
            }else if(active == 2){
                this.setGpsModal = false;
            }else if(active == 3){
                this.platformModal = false;
            }else if(active == 4){
                this.fvsModal = false;
            }else if(active == 5){
                this.algorithmModal = false;
            }else if(active == 6){
                this.gpsTypeModal = false;
            }
        },
        //保存集合
        save(active){
            this.checkFlag = false;
            let params = {
                deptId : this.deptId,
                module : this.module,
            }
            if(this.modeleActive == 1){
                if(this.tabActive == 1){
                    if(active == 1){
                        this.checkData(1,[{
                            type: 3,
                            frequencyLimitDay:this.frequencyLimitDay,
                            frequencyLimitHour:this.frequencyLimitHour,
                            frequencyLimitInterval:this.frequencyLimitInterval,
                        }]);
                    }else if(active == 2){
                        this.checkData(1,this.typeList);
                    }
                    let data = [
                        {
                            type: 3,
                            frequencyLimitDay:this.frequencyLimitDay,
                            frequencyLimitHour:this.frequencyLimitHour,
                            frequencyLimitInterval:this.frequencyLimitInterval,
                        },
                        ...this.typeList
                    ];
                    params.data = data;
                }else if(this.tabActive == 2){
                    if(active == 1){
                        this.checkData(2,[{
                            oilStrategy: this.oilStrategy,
                        }]);
                    }else if(active == 2){
                        this.checkData(2,[{
                            workStrategy: this.workStrategy,
                        }]);
                    }
                    let data = [
                        {
                            oilStrategy: this.oilStrategy,
                            workStrategy: this.workStrategy,
                        }
                    ];
                    params.data = data
                }else if(this.tabActive == 3){
                    let code = '';
                    let polygonPointAll = this.polygonPointAll;
                    let polygonPointList = [];
                    let multiPolygonPointList = [];
                    let data = [];
                    if(this.polygonPointList.length == 0){
                        params.data = this.polygonPointAll;
                    }else{
                        if(this.gpsType == 1){
                           code = 'fence';
                        }else if(this.gpsType == 2){
                            code = 'car_fence';
                        }else if(this.gpsType == 3){
                            code = 'ship_fence';
                        }
                        if(this.polygonPointList.length == 1){
                             polygonPointList = this.polygonPointList[0];
                            let obj = polygonPointList[0];
                            polygonPointList.push(obj);
                        }else if(this.polygonPointList.length > 1){
                            multiPolygonPointList = this.polygonPointList;
                            multiPolygonPointList.forEach(v => {
                                if(v[0].lat != v[v.length - 1].lat && v[0].lng != v[v.length - 1].lng){
                                    let obj = v[0];
                                    v.push(obj)
                                }
                            })
                        }
                        let flag = true;
                        polygonPointAll.forEach(v => {
                            if(v.code == code){
                                let obj = {
                                    code,
                                }
                                if(this.polygonPointList.length == 1){
                                    obj.polygonPointList = [...polygonPointList];
                                }else if(this.polygonPointList.length > 1){
                                    obj.multiPolygonPointList = multiPolygonPointList;
                                }
                                data.push(obj);
                                flag = false;
                            }
                        })
                        if(flag){
                            let obj = {
                                code,
                            }
                            if(this.polygonPointList.length == 1){
                                obj.polygonPointList = [...polygonPointList]
                            }else if(this.polygonPointList.length > 1){
                                obj.multiPolygonPointList = multiPolygonPointList
                            }
                            data.push(obj);
                            params.data = [...polygonPointAll,...data];
                        }else{
                            params.data = [...data];
                        }
                    }
                }
            }else if(this.modeleActive == 2){
                if(this.tabActive == 1){
                    if(active == 1){
                        this.checkData(1,[{
                            type: 3,
                            frequencyLimitDay:this.frequencyLimitDay,
                            frequencyLimitHour:this.frequencyLimitHour,
                            frequencyLimitInterval:this.frequencyLimitInterval,
                        }]);
                    }else if(active == 2){
                        this.checkData(1,this.typeList);
                    }
                    let data = [
                        {
                            type: 3,
                            frequencyLimitDay:this.frequencyLimitDay,
                            frequencyLimitHour:this.frequencyLimitHour,
                            frequencyLimitInterval:this.frequencyLimitInterval,
                        },
                        ...this.typeList
                    ];
                    params.data = data;
                }else if(this.tabActive == 2){
                    params.data = this.platformList;
                    // this.checkData(2,this.platformList);
                }else if(this.tabActive == 3){
                    params.data = [
                        {
                            code : 'fence',
                        }
                    ];
                    if(this.polygonPointList.length == 0){
                        params.data = this.polygonPointAll;
                    }else{
                        if(this.polygonPointList.length == 1){
                            let polygonPointList = this.polygonPointList[0];
                            let obj = polygonPointList[0];
                            polygonPointList.push(obj);
                            params.data[0].polygonPointList = [...polygonPointList];
                        }else if(this.polygonPointList.length > 1){
                            let polygonPointList = this.polygonPointList;
                            polygonPointList.forEach(v => {
                                if(v[0].lat != v[v.length - 1].lat && v[0].lng != v[v.length - 1].lng){
                                    let obj = v[0];
                                    v.push(obj)
                                }
                            })
                            params.data[0].multiPolygonPointList = [...polygonPointList];
                        }
                    }
                }
            }else if(this.modeleActive == 3){
                if(this.tabActive == 1){
                    params.data = this.fvsList;
                    this.checkData(2,this.fvsList);
                }
            }else if(this.modeleActive == 4){
                if(this.tabActive == 1){
                    params.data = this.algorithmList;
                }
            }else if(this.modeleActive == 5){
                if(this.tabActive == 1){
                    this.checkData(2,this.openLicense);
                    params.data = this.openLicense;
                }
            }
            if(this.modeleActive == 5 && this.editActive == 2){
                this.setOpenLicenseRule();
                return
            }
            if(!this.checkFlag){
                this.setCfgConfigureFn(params)
            }
        },
        // 树结构节点点击事件
        treeNodeClickFn(data,node,obj){

            this.deptId = data.id;
            this.editActive = 0;
            this.tabActive = '1';
            if(this.modeleActive == 1){
                this.module = 'mach_freq';
            }else if(this.modeleActive == 2){
                this.module = 'emp_freq';
                if(this.tabActive == 2){
                    this.getPlatformTypeList()
                }
            }else if(this.modeleActive == 3){
                this.module = 'fvs_platform';
            }else if(this.modeleActive == 4){
                this.module = 'fim_alg_type';
                this.getAlgorithmListFn();
            }else if(this.modeleActive == 5){
                this.module = 'open_license';
                this.getOpenLicenseRule();
            }
            this.getCfgListFn();
        },
        //数据初始化
        initData(){
            //清空报警类型列表
            this.typeList = [];
            //清空报警类型Id列表
            this.typeIdList = [];
            //1天内报警总数
            this.frequencyLimitDay = '';
            //1小时内报警总数
            this.frequencyLimitHour = '';
            //两次报警间隔
            this.frequencyLimitInterval = '';
            //油位计算策略
            this.oilStrategy = '';
            //工时计算策略
            this.workStrategy = '';

            //划线区域
            this.polygonPointList = [];
            this.gpsTypeArr = [];

            //清除闸机参数
            this.platformList = [];
            this.platformIdList = [];

            //视频id列表
            this.fvsIdList = [];
            this.fvsList = [];

            //算法列表
            this.algorithmList = [];
            //算法id
            this.algorithmId = [];

            //api基本设置
            this.openLicense = [];
            this.openLicenseList = [];
        },
        //公共设置缓存
        setLocalStorage(){
            if(this.modeleActive == 1 || this.modeleActive == 2){
                if(this.tabActive == 1){
                    localStorage.setItem('frequencyLimitDay',this.frequencyLimitDay);
                    localStorage.setItem('frequencyLimitHour',this.frequencyLimitHour);
                    localStorage.setItem('frequencyLimitInterval',this.frequencyLimitInterval);
                    localStorage.setItem('cfg_type_list',JSON.stringify(this.typeList));
                    localStorage.setItem('cfg_type_id_list',JSON.stringify(this.typeIdList));
                }else if(this.tabActive == 2){
                    if(this.modeleActive == 1){
                        localStorage.setItem('workStrategy',this.workStrategy);
                        localStorage.setItem('oilStrategy',this.oilStrategy);
                    }else if(this.modeleActive == 2){
                        localStorage.setItem('platformList',JSON.stringify(this.platformList));
                        localStorage.setItem('platformIdList',JSON.stringify(this.platformIdList));
                    }
                }else if(this.tabActive == 3){
                    localStorage.setItem('polygonPointList',JSON.stringify(this.polygonPointList));
                    localStorage.setItem('gpsTypeArr',JSON.stringify(this.gpsTypeArr));
                }
            }else if(this.modeleActive == 3){
                if(this.tabActive == 1){
                    localStorage.setItem('fvsList',JSON.stringify(this.fvsList));
                    localStorage.setItem('fvsIdList',JSON.stringify(this.fvsIdList));
                }
            }else if(this.modeleActive == 4){
                if(this.tabActive == 1){
                    localStorage.setItem('algorithmList',JSON.stringify(this.algorithmList));
                    localStorage.setItem('algorithmId',JSON.stringify(this.algorithmId));
                }
            }else if(this.modeleActive == 5){
                if(this.tabActive == 1){
                    localStorage.setItem('openLicense',JSON.stringify(this.openLicense));
                    localStorage.setItem('openLicenseList',JSON.stringify(this.openLicenseList));

                    localStorage.setItem('checkedList',JSON.stringify(this.checkedList));
                }
            }
        },
        //公共获取缓存
        getLocalStorage(){
            if(this.modeleActive == 1 || this.modeleActive == 2){
                if(this.tabActive == 1){
                    if(this.editActive == 1){
                        this.frequencyLimitDay = localStorage.getItem('frequencyLimitDay');
                        this.frequencyLimitHour = localStorage.getItem('frequencyLimitHour');
                        this.frequencyLimitInterval = localStorage.getItem('frequencyLimitInterval');
                    }else{
                        this.typeList = JSON.parse(localStorage.getItem('cfg_type_list'));
                        this.typeIdList = JSON.parse(localStorage.getItem('cfg_type_id_list'));
                    }
                }else if(this.tabActive == 2){
                    if(this.modeleActive == 1){
                        this.workStrategy = localStorage.getItem('workStrategy');
                        this.oilStrategy = localStorage.getItem('oilStrategy');
                    }else if(this.modeleActive == 2){
                        if(this.editActive == 1){
                            this.platformList = JSON.parse(localStorage.getItem('platformList'));
                            this.platformIdList = JSON.parse(localStorage.getItem('platformIdList'));
                        }
                    }
                }else if(this.tabActive == 3){
                    this.polygonPointList = JSON.parse(localStorage.getItem('polygonPointList'));
                    this.gpsTypeArr = JSON.parse(localStorage.getItem('gpsTypeArr'));
                }
            }else if(this.modeleActive == 3){
                if(this.tabActive == 1){
                    this.fvsList = JSON.parse(localStorage.getItem('fvsList'));
                    this.fvsIdList = JSON.parse(localStorage.getItem('fvsIdList'));
                }
            }else if(this.modeleActive == 4){
                if(this.tabActive == 1){
                    this.algorithmList = JSON.parse(localStorage.getItem('algorithmList'));
                    this.algorithmId = JSON.parse(localStorage.getItem('algorithmId'));
                }
            }else if(this.modeleActive == 5){
                if(this.tabActive == 1){
                    this.openLicense = JSON.parse(localStorage.getItem('openLicense'));
                    this.openLicenseList = JSON.parse(localStorage.getItem('openLicenseList'));
                }
            }
        },
        //获取组织机构
        getAlldeptListFn() {
            let params = {
                keyword:'',
            }
            getAlldeptList(params)
                .then(res => {
                    if (res.code == 200) {
                        let list = res.data.list;
                        let arr = [];
                        if(list.length == 1 && list[0].id == 0) {
                            if(list[0].children && list[0].children.length > 0 ) {
                                arr = list[0].children;
                            }  else {
                                arr = list;
                            }
                        } else {
                            arr = this.list;
                        }
                        this.treeList = treeSort(trans(arr));
                        this.deptId = this.treeList[0].id;
                        this.$nextTick(() => {
                            // treeBox 元素的ref   value 绑定的node-key
                            this.$refs.treeBox.setCurrentKey( this.deptId);
                        });
                        this.getCfgListFn();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        renderContent (h, { root, node, data }) {
            return (
                <span class="custom-tree-node">
                        <p>
                           <span class="sub">{data.type == 0 ? '公' : '项'}</span>
                           <span class="title">{data.label}</span>
                        </p>
                    </span>
            )
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //数据校验
        checkData(active,arr){
            let reg = /^\d+$/;
            for (let i = 0; i < arr.length; i++) {
                let obj = arr[i];
                for (const key in obj) {
                    if(obj[key] === '' && key != 'remark'){
                        this.$Modal.warning({
                            title: "提示",
                            content: "数据不能为空"
                        });
                        this.checkFlag = true;
                        return;
                    }
                    if(active == 1){
                        if(!reg.test(obj[key])){
                            this.$Modal.warning({
                                title: "提示",
                                content: "请输入数字"
                            });
                            this.checkFlag = true;
                            return;
                        }
                    }
                }
            }
        },
    },
    mounted(){
        this.getAlldeptListFn();
    }
};
</script>

<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
</style>

<style lang="scss" scoped>
@import "./../../assets/style/mach/msgModal.scss";
.main_content{
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f5f5f5;
    display: flex;
    .left{
        width: 300px;
        height: 100%;
        background-color: #fff;
        border-radius: 6px;
        margin-right: 10px;
        padding: 10px;
        box-sizing: border-box;
        /deep/ .custom-tree-node{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            p{
                width: 220px;
                display: flex;
                justify-content: flex-start;
                align-content: center;
            }
            .title{
                display: inline-block;
                flex: 1;
                font-size: 14px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .sub{
                width: 20px;
                height: 20px;
                background: var(--themeColor);
                color:#fff;
                text-align: center;
                line-height: 20px;
                font-size: 12px;
                margin-right: 5px;
            }
        }
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }
        /*滚动槽*/
        &::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            border-radius: 10px;
        }
        /* 滚动条滑块 */
        &::-webkit-scrollbar-thumb {
            border-radius: 10px;
            background: rgba(0, 0, 0, 0.1);
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
        }
        &::-webkit-scrollbar-thumb:window-inactive {
            background: rgba(255, 0, 0, 0.1);
        }
    }
    .center{
        width: 250px;
        height: 100%;
        background-color: #fff;
        border-radius: 6px;
        margin-right: 10px;
        .list{
            width: 100%;
            height: 100%;
            padding: 10px;
            box-sizing: border-box;
            .item{
                width: 100%;
                height: 50px;
                line-height: 50px;
                text-align: center;
                color: #ccc;
                background-color: #eee;
                margin-bottom: 5px;
                cursor: pointer;
                &.active{
                    color: #fff;
                    background-color: var(--themeColor);
                }
            }
            overflow-y: auto;
            &::-webkit-scrollbar {
                width: 6px;
            }
            /*滚动槽*/
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
            }
            /* 滚动条滑块 */
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(255, 0, 0, 0.1);
            }
        }
    }
    .right{
        flex: 1;
        height: 100%;
        background-color: #fff;
        border-radius: 6px;
        overflow: hidden;
        .content{
            width: 100%;
            height: 100%;
            padding: 10px 20px;
            box-sizing: border-box;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            h2{
                width: 98%;
                height: 40px;
                line-height: 40px;
                background: var(--themeColor2);
                margin: 0 auto;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding-left: 20px;
                box-sizing: border-box;
                .bc{
                    width: 5px;
                    height: 15px;
                    background: var(--themeColor);
                    margin-right: 12px;
                }
                .add{
                    cursor: pointer;
                    margin-left: 12px;
                    font-size: 20px;
                }
                .cancel,
                .save{
                    width: 60px;
                    height: 25px;
                    color: #fff;
                    text-align: center;
                    line-height: 25px;
                    border-radius: 6px;
                    margin: 0 15px;
                    font-size: 14px;
                    font-style: normal;
                    cursor: pointer;
                }
                .cancel{
                    background-color: #ccc;
                }
                .save{
                    background-color: var(--themeColor);
                }
            }
            .top{
                width: 100%;
                height: auto;
            }
            .bottom{
                width: 100%;
                flex: 1;
                overflow-y: auto;
                &::-webkit-scrollbar {
                    width: 6px;
                }
                /*滚动槽*/
                &::-webkit-scrollbar-track {
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                    border-radius: 10px;
                }
                /* 滚动条滑块 */
                &::-webkit-scrollbar-thumb {
                    border-radius: 10px;
                    background: rgba(0, 0, 0, 0.1);
                    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                }
                &::-webkit-scrollbar-thumb:window-inactive {
                    background: rgba(255, 0, 0, 0.1);
                }
                .info{
                    width: 100%;
                    margin:20px 0;
                    .list{
                        position: relative;
                        width: 95%;
                        margin: 20px auto;
                        display: flex;
                        justify-content: flex-start;
                        align-items: center;
                        .tree{
                            width: 100%;
                            height: 300px;
                            &::-webkit-scrollbar {
                                width: 6px;
                            }
                            /*滚动槽*/
                            &::-webkit-scrollbar-track {
                                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                                border-radius: 10px;
                            }
                            /* 滚动条滑块 */
                            &::-webkit-scrollbar-thumb {
                                border-radius: 10px;
                                background: rgba(0, 0, 0, 0.1);
                                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                            }
                            &::-webkit-scrollbar-thumb:window-inactive {
                                background: rgba(255, 0, 0, 0.1);
                            }
                            /deep/ .el-tree{
                                width: 98%;
                                height: 100%;
                                margin: auto;
                            }
                        }
                        &.table{
                            background-color: #eee;
                            padding: 10px;
                            box-sizing: border-box;
                            .close{
                                position: absolute;
                                right: -10px;
                                top: -10px;
                                width: 20px;
                                height: 20px;
                                cursor: pointer;
                                z-index: 10;
                                img{
                                    display: block;
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                        }
                        .item{
                            width: 100%;
                            height: 40px;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                            &.imgBox{
                                height: auto !important;
                                position: relative;
                                &:hover{
                                    .delImg{
                                        display: block;
                                    }
                                }
                                &:nth-of-type(4n){
                                    margin-right: 0;
                                }
                                .img{
                                    display: block;
                                    width: 100%;
                                    height: 150px;
                                }
                                .delImg{
                                    display: none;
                                    position: absolute;
                                    right: -10px;
                                    top: -10px;
                                    width: 20px;
                                    height: 20px;
                                    cursor: pointer;
                                }
                                .text{
                                    position: absolute;
                                    top: 50%;
                                    left: 50%;
                                    transform: translate(-50%,-50%);
                                    color: #fff;
                                }
                            }
                            .name{
                                width: 150px;
                            }
                            .sub{
                                flex: 1;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                                .btn{
                                    width: 200px;
                                    height: 40px;
                                    text-align: center;
                                    line-height: 40px;
                                    color: #fff;
                                    background-color: var(--themeColor);
                                    cursor: pointer;
                                    border-radius: 6px;
                                    &:hover{
                                        opacity: 0.8;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

}
/deep/ .ivu-input{
    border: none;
    background-color: #F8F7F9 !important;
    height: 40px !important;
}
.msg{
    width: 100%;
    height: 600px;
    display: flex;
    justify-content: space-between;
    .fence {
        width: calc(100% - 300px);
        height: 100%;
        position: relative;
        #container {
            width: 100%;
            height: 100%;
            // position: relative;
        }
    }
    .right {
        width: 300px;
        height: 100%;
        background: #fff;
        position: relative;
        .top {
            width: 300px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            input {
                margin-right: 10px;
                cursor: pointer;
            }
            span {
                margin-right: 30px;
            }
        }
        .isShow {
            width: 200px;
            margin: 0 auto;
        }
        .center {
            width: 280px;
            margin: 0 auto;
            height: 550px;
            overflow-y: scroll;
            &::-webkit-scrollbar {
                width: 6px;
            }
            /*滚动槽*/
            &::-webkit-scrollbar-track {
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                border-radius: 10px;
            }
            /* 滚动条滑块 */
            &::-webkit-scrollbar-thumb {
                border-radius: 10px;
                background: rgba(0, 0, 0, 0.1);
                -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
                box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
            }
            &::-webkit-scrollbar-thumb:window-inactive {
                background: rgba(255, 0, 0, 0.1);
            }
            p {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                span {
                    width: 80px;
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }
            }
            .list {
                width: 100%;
                height: 50px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }
        }
        .center::-webkit-scrollbar {
            display: none;
        }
    }
}
.searchAddress{
    width: 300px;
    position: absolute;
    top: 5px;
    left: 300px;
    display: flex;
    justify-content: space-between;
}
.addModel{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .bottom{
        padding-top: 20px;
        width: 100%;
        height: calc(100%);
        background: #fff;
        border-radius: 10px;
        .list {
            width: 98%;
            margin: 20px auto;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            .item{
                width: 150px;
                height: 120px;
                margin-right: 25px;
                margin-bottom: 25px;
                position: relative;
                border: 2px solid transparent;
                box-sizing: border-box;

                &.active{
                    border: 2px solid red !important;
                }
                &:nth-of-type(5n){
                    margin-right: 0;
                }
                .img{
                    display: block;
                    width: 100%;
                    height: 100%;
                }
                .text{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                    color: #fff;
                }
            }
        }
    }
}

</style>


